<template>
  <div class="layout-wrapper">
    <div class="sider-container">
      <slot name="sidebar"></slot>
    </div>
    <div class="main-container">
      <slot name="nav"></slot>
      <slot name="main"></slot>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import '../styles/mixin.scss';

.layout-wrapper {
  @include clearfix;
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;

  .sider-container {
    width: 20%;
    height: 100%;
    // background-color: #baf;
  }

  .main-container {
    width: 80%;
    height: 100%;
  }
}
</style>